<template>
    <section>
        <div>
            <p class="c1OpenP fixMax" id="fadOutP">
                <label>总资产 ￥ 0</label>
            </p>
            <img src="../../static/img/openRight.png" class="openRightImg" @click="openRight" />
        </div>
        <header id="c1HeaderId">
            <div class="imgDx">
                <img src="../../static/img/topbg1.png" class="hdImg1" />
                <div>
                    <p>总资产(￥)</p>
                    <p class="jiagePx">≈￥0.0000011</p>
					<p class="beifenP">提示:请尽快备份助记词,否则钱包丢失无法找回<span>请备份</span></p>
					<div class="payDivx">
						<span><img src="../../static/img/img1x.png"/></span>
						<span><img src="../../static/img/img2x.png"/></span>
						<span><img src="../../static/img/img3x.png"/></span>
					</div>
                </div>
            </div>



         <!--   <div class="qrP">
                <span>
                    <img src="../static/img/qrScan.png" />
                    <p>扫一扫</p>
                </span>
                <span>
                    <img src="../../static/img/pay.png" />
                    <p>付款</p>
                </span>
                <span>
                    <img src="../../static/img/shouKuan.png" />
                    <p>收款</p>
                </span>
            </div>-->
            <p>
                <img src="../../static/img/c1Add.png" class="c1AddImg" @click="jump('/addCurrency')" />
            </p>
        </header>
        <article>
            <div class="c1Single">
                <img src="../../static/img/ic1.png" />
                <label>ETH</label>
                <span>
                    <p>2</p>
                    <p style="color: rgb(119,131,152);">≈￥7.62</p>
                </span>
            </div>
            <div class="c1Single">
                <img src="../../static/img/ic2.png" />
                <label>REP</label>
                <span>
                    <p>11</p>
                    <p style="color: rgb(119,131,152);">≈￥99.1</p>
                </span>
            </div>
            <div class="c1Single">
                <img src="../../static/img/ic3.png" />
                <label>1ST</label>
                <span>
                    <p>20</p>
                    <p style="color: rgb(119,131,152);">≈￥0.02</p>
                </span>
            </div>
            <div class="c1Single">
                <img src="../../static/img/ic4.png" />
                <label>ANT</label>
                <span>
                    <p>20</p>
                    <p style="color: rgb(119,131,152);">≈￥0.02</p>
                </span>
            </div>
            <div class="c1Single">
                <img src="../../static/img/ic5.png" />
                <label>MYST</label>
                <span>
                    <p>20</p>
                    <p style="color: rgb(119,131,152);">≈￥0.02</p>
                </span>
            </div>
           <!-- <div class="c1Single">
                <img src="../../static/img/ic6.png" />
                <label>OWN</label>
                <span>
                    <p>20</p>
                    <p style="color: rgb(119,131,152);">≈￥0.02</p>
                </span>
            </div>-->
            <div class="c1Single">
                <img src="../../static/img/ic7.png" />
                <label>SNT</label>
                <span>
                    <p>20</p>
                    <p style="color: rgb(119,131,152);">≈￥0.02</p>
                </span>
            </div>
            <div class="c1Single">
                <img src="../../static/img/ic8.png" />
                <label>BAT</label>
                <span>
                    <p>20</p>
                    <p style="color: rgb(119,131,152);">≈￥0.02</p>
                </span>
            </div>
            <div class="c1Single">
                <img src="../../static/img/ic9.png" />
                <label>EOS</label>
                <span>
                    <p>20</p>
                    <p style="color: rgb(119,131,152);">≈￥0.02</p>
                </span>
            </div>
            <div class="c1Single">
                <img src="../../static/img/ic10.png" />
                <label>PAY</label>
                <span>
                    <p>20</p>
                    <p style="color: rgb(119,131,152);">≈￥0.02</p>
                </span>
            </div>
            <div class="c1Single">
                <img src="../../static/img/ic11.png" />
                <label>BNT</label>
                <span>
                    <p>20</p>
                    <p style="color: rgb(119,131,152);">≈￥0.02</p>
                </span>
            </div>
            <p style="height: 0.5rem;"></p>
        </article>
        <menuBtm :show="showBtm"></menuBtm>
        <aside @click="openRight" class="fixMax" id="c1HidOut" @touchmove.prevent>
            <div @click.stop="rightCk" id="c1hidCt">
                <p>
                    <img src="../../static/img/33.png" />昵称 </p>
                <p>
                    <img src="../../static/img/scanning.png" />扫一扫</p>
                <p>
                    <img src="../../static/img/wallet.png" />创建钱包</p>
            </div>
        </aside>
    </section>
</template>

<script>
    //	import { homeGet } from '../common/comfn';
    import menuBtm from '../com/menuBtm.vue';
    export default {
        data() {
            return {
                showHid: true,
                canCk: true,
                showBtm: false
            }
        },
        components: {
            menuBtm
        },
        methods: {
            openRight: function () {
                var vm = this;
                if (!this.canCk) {
                    return;
                }
                this.canCk = false;
                if (this.showHid) {
                    document.getElementById('c1hidCt').style.left = 0;
                    document.getElementById('c1HidOut').style.zIndex = 12;
                    setTimeout(function () {
                        vm.canCk = true;
                    }, 600)

                } else {
                    document.getElementById('c1hidCt').style.left = '100%';
                    setTimeout(function () {
                        if (document.getElementById('c1HidOut')) {
                            document.getElementById('c1HidOut').style.zIndex = -999;
                            vm.canCk = true;
                        }
                    }, 600)
                }
                this.showHid = !this.showHid;
            },
            rightCk: function () {},
            jump2: function () {}
        },
        created: function () {},
        mounted: function () {
            var vm = this;
            var allH = parseInt(getH('c1HeaderId') - getH('fadOutP'));
            this.atScorll(function (val) {
                if (val <= allH) {
                    qid('fadOutP').style.opacity = val / allH;
                    qid('c1HeaderId').style.opacity = 1 - val / allH;
                } else {
                    qid('fadOutP').style.opacity = 1;
                }
            })
        }
    }
</script>

<style scoped="scoped">
    header {
        position: relative;
        overflow: hidden;
        height: 3.1rem;
        background-color: #141414;
    }

    header p {
        text-align: center;
        color: #fff;
        font-size: 20px;
    }
    /*    header p:nth-child(1) img {
        width: 0.6rem;
        margin-top: 0.42rem;
    }

    header p:nth-child(2) {
        font-size: 0.18rem;
        position: relative;
        margin-top: 0.2rem;
    }

    header p:nth-child(2) label {
        display: inline-block;
        vertical-align: middle;
    }

    header p:nth-child(2) span {
        display: inline-block;
        font-size: 0.1rem;
        color: rgb(122, 241, 242);
        border: 1px solid rgb(122, 241, 242);
        padding: 2px 0.1rem;
        border-radius: 0.17rem;
        margin-left: 0.1rem;
        vertical-align: middle;
    }

    header p:nth-child(3) label {
        display: inline-block;
        vertical-align: middle;
    }

    header p:nth-child(3) img {
        display: inline-block;
        height: 0.14rem;
        margin-left: 0.1rem;
        vertical-align: middle;
    }

    header p:nth-child(3) {
        margin-top: 0.2rem;
    }*/

    .c1AddImg {
        position: absolute;
        width: 0.25rem;
        bottom: 0.15rem;
        right: 0.15rem;
        top: auto;
        z-index: 10;
    }

    .c1Single {
        background-color: #FFFFFF;
        height: 0.82rem;
        padding-top: 0.2rem;
        border-bottom: 1px solid #e8e8e8;
    }

    .c1Single img,
    .c1Single label,
    .c1Single span {
        display: inline-block;
        vertical-align: middle;
        height: 0.42rem;
    }

    .c1Single img {
        width: 0.42rem;
        border-radius: 0.42rem;
        margin-left: 0.15rem;
    }

    .c1Single label {
        margin-left: 0.1rem;
        font-size: 0.18rem;
        line-height: 0.42rem;
    }

    .c1Single span {
        float: right;
        margin-right: 0.15rem;
        text-align: right;
    }

    .c1Single span p {
        margin-top: 0.02rem;
    }

    .c1OpenP {
        position: fixed;
        top: 0;
        height: 0.6rem;
        width: 100%;
        /*background-color: rgb(158, 129, 104);*/
		background-color: #2a2a2a;
        opacity: 0;
        z-index: 11;
    }

    .c1OpenP label {
        display: inline-block;
        margin-top: 0.2rem;
        margin-left: 0.1rem;
        color: #FFFFFF;
    }

    .openRightImg {
        position: fixed;
        height: 0.22rem;
        top: 0.18rem;
        width: 0.22rem;
        z-index: 12;
        left: 50%;
        margin-left: 1.5rem;
    }

    .c1OpenP img {
        position: absolute;
    }

    aside {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        padding-left: 1.55rem;
        overflow: hidden;
        z-index: -1;
        background-color: rgba(0, 0, 0, 0.1);
        -webkit-transform: translateZ(0);
    }

    aside div {
        transition: all 0.5s;
        background-color: #FFFFFF;
        height: 100%;
        position: relative;
        overflow: hidden;
        left: 100%;
    }

    aside img {
        display: inline-block;
        vertical-align: middle;
        height: 0.16rem;
        margin-right: 0.2rem;
    }

    aside div p:nth-child(1) {
        background-color: #ececec;
        margin-top: 0.6rem;
        height: 0.6rem;
        padding-top: 0.1rem;
        padding-left: 0.2rem;
    }

    aside div p:nth-child(1) img {
        height: 0.4rem;
        width: 0.4rem;
        border-radius: 0.4rem;
        border: 1px solid #FFFFFF;
    }

    aside div p:nth-child(2) {
        margin-top: 0.5rem;
        padding-left: 0.2rem;
    }

    aside div p:nth-child(3) {
        margin-top: 0.2rem;
        padding-left: 0.2rem;
    }

    .qrP {
        font-size: 0;
        margin-top: 0.35rem;
    }

    .qrP p {
        color: #000 !important;
        margin-top: 0.05rem !important;
        font-size: 0.12rem !important;
    }

    .qrP span {
        display: inline-block;
        width: 33.33%;
        text-align: center;
    }

    .qrP span img {
        width: 25%;
    }

    .imgDx {
        position: relative;
        width: 100%;
    }
	.imgDx img{
		display: inline-block;
		width: 100%;
	}
	.imgDx>div{
		width: 100%;
		position: absolute;
		bottom: -0.5rem;
		padding: 0.1rem;
	}
	.beifenP{
		font-size: 0.12rem;
		color: #d3b176;
		margin-top: 0.2rem;
	}
	.beifenP span{
		display: inline-block;
		float: right;
		border-radius: 0.16rem;
		width: 0.5rem;
		line-height: 0.16rem;
		border: 1px solid #5c503a;
		color: #5c503a;
		font-size: 0.13rem;
		padding-top:1px;
	}
	.jiagePx{
		color: #d3b176;
		font-size: 0.22rem;
		margin-top: 0.1rem;
	}
	.payDivx{
		background-color: #2a2a2a;
		font-size: 0;
		border-radius: 4px;
		margin-top: 0.3rem;
		padding: 0.12rem 0;
	}
	.payDivx>span{
		display: inline-block;
		width: 33.3%;
		text-align: center;
		vertical-align: top;
	}
	.payDivx span img{
		width: auto;
		height: 0.4rem;
	}
</style>
